﻿<!DOCTYPE html>
<html>

<head>
    <title>笔记登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入自定义样式 -->
    <link type="text/css" href="css/login.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <h1>笔记<sup>V2018</sup></h1>
    <div class="login" style="margin-top:50px;" id="login">
        <div class="header">
            <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
                <a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a>
                <div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
            </div>
        </div>
        <!-- 登录 -->
        <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">
            <div class="web_login" id="web_login">
                <div class="login-box">
                    <div class="login_form">
                        <input type="hidden" name="to" value="log" />
                        <div class="uinArea" id="uinArea">
                            <label class="input-tips" for="u">帐号：</label>
                            <div class="inputOuter" id="uArea">
                                <el-input v-model="username" placeholder="请输入用户名"></el-input>
                            </div>
                        </div>
                        <div class="pwdArea" id="pwdArea">
                            <label class="input-tips" for="p">密码：</label>
                            <div class="inputOuter" id="pArea">
                                <el-input v-model="password" placeholder="请输入密码"></el-input>
                            </div>
                        </div>
                        <div style="text-align:center;">
                            <el-button type="primary" @click="loginfun">登 录</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 注册 -->
        <div class="qlogin" id="qlogin" style="display: none; ">
            <div class="web_login">
                <input type="hidden" name="to" value="reg" />
                <input type="hidden" name="did" value="0" />
                <ul class="reg_form" id="reg-ul">
                    <div id="userCue" class="cue">快速注册请注意格式</div>
                    <li>
                        <label for="user" class="input-tips2">用户名：</label>
                        <div class="inputOuter2">
                            <el-input v-model="username" placeholder="请输入用户名"></el-input>
                        </div>
                    </li>
                    <li>
                        <label for="passwd" class="input-tips2">密码：</label>
                        <div class="inputOuter2">
                            <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
                        </div>
                    </li>
                    <li>
                        <label for="passwd2" class="input-tips2">确认密码：</label>
                        <div class="inputOuter2">
                            <el-input v-model="agpassword" placeholder="请确认密码"></el-input>
                        </div>
                    </li>
                    <li style="text-align:center;">
                        <el-button type="primary" @click="registeredfun">注 册</el-button>
                    </li>
                    <div class="cl "></div>
                </ul>
            </div>
        </div>
    </div>
    <!-- 引入jquery -->
    <script type="text/javascript " src="js/jquery-1.9.0.min.js "></script>
    <!-- 引入vue -->
    <script type="text/javascript " src="js/vue.min.js "></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js "></script>
    <!-- 引入自定义方法 -->
    <script type="text/javascript " src="js/login.js "></script>
    <script>
        new Vue({
            el: '#login',
            data: {
                username: "",
                password: "",
                agpassword: ""
            },
            methods: {
                // 登录
                loginfun: function() {
                    var self = this
                    var parm = {
                        user: self.username,
                        pwd: self.password
                    }
                    $.post("/user/login ", parm, function(result) {
                        if (result.success) {
                            self.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            window.location.href = 'user.html';
                        } else {
                            self.$message.error(result.msg);
                        }
                    });
                },
                // 注册
                registeredfun: function() {
                    var self = this
                    var parm = {
                        user: self.username,
                        pwd: self.password
                    }
                    $.post("/user/registered ", parm, function(result) {
                        if (result.success) {
                            self.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                            window.location.href = 'index.html';
                        } else {
                            self.$message.error(result.msg);
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>